<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AWK运维三剑客之首 - 交互式学习平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.21/vue.global.min.js"></script>
    <style>
        .terminal {
            background: #1a1a1a;
            color: #00ff00;
            font-family: 'Courier New', monospace;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            overflow-x: auto;
        }
        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            font-family: 'Courier New', monospace;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            overflow-x: auto;
            border-left: 4px solid #4299e1;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .glass-card {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="bg-base-200">
    <div id="app">
        <!-- 导航栏 -->
        <div class="navbar bg-base-100 shadow-lg">
            <div class="navbar-start">
                <div class="dropdown">
                    <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                        <i class="fas fa-bars text-xl"></i>
                    </div>
                    <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="currentTab = 'overview'">概述</a></li>
                        <li><a @click="currentTab = 'basics'">基础语法</a></li>
                        <li><a @click="currentTab = 'examples'">实战示例</a></li>
                        <li><a @click="currentTab = 'playground'">在线练习</a></li>
                    </ul>
                </div>
                <a class="btn btn-ghost text-xl">
                    <i class="fas fa-terminal mr-2"></i>
                    AWK 运维三剑客
                </a>
            </div>
            <div class="navbar-center hidden lg:flex">
                <ul class="menu menu-horizontal px-1">
                    <li><a @click="currentTab = 'overview'" :class="{'active': currentTab === 'overview'}">概述</a></li>
                    <li><a @click="currentTab = 'basics'" :class="{'active': currentTab === 'basics'}">基础语法</a></li>
                    <li><a @click="currentTab = 'examples'" :class="{'active': currentTab === 'examples'}">实战示例</a></li>
                    <li><a @click="currentTab = 'playground'" :class="{'active': currentTab === 'playground'}">在线练习</a></li>
                </ul>
            </div>
            <div class="navbar-end">
                <div class="dropdown dropdown-end">
                    <div tabindex="0" role="button" class="btn btn-ghost">
                        <i class="fas fa-palette"></i>
                    </div>
                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="changeTheme('dark')">暗色主题</a></li>
                        <li><a @click="changeTheme('light')">亮色主题</a></li>
                        <li><a @click="changeTheme('cyberpunk')">赛博朋克</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="container mx-auto px-4 py-8">
            <!-- 概述页面 -->
            <div v-if="currentTab === 'overview'" class="space-y-8">
                <div class="hero gradient-bg rounded-lg text-white">
                    <div class="hero-content text-center">
                        <div class="max-w-md">
                            <h1 class="text-5xl font-bold mb-4">
                                <i class="fas fa-crown mr-3"></i>
                                AWK
                            </h1>
                            <p class="text-xl mb-6">运维三剑客之首</p>
                            <p class="mb-6">强大的文本处理工具，结构化数据处理的王者</p>
                            <button class="btn btn-primary btn-lg" @click="currentTab = 'basics'">
                                开始学习
                                <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title">
                                <i class="fas fa-database text-primary"></i>
                                结构化处理
                            </h2>
                            <p>支持多维数组、关联数组，轻松处理复杂数据结构</p>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title">
                                <i class="fas fa-code text-secondary"></i>
                                类C语法
                            </h2>
                            <p>熟悉的编程语法，支持函数、循环、条件判断</p>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <h2 class="card-title">
                                <i class="fas fa-chart-line text-accent"></i>
                                实时分析
                            </h2>
                            <p>强大的正则表达式和统计功能，实时日志分析利器</p>
                        </div>
                    </div>
                </div>

                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-2xl mb-4">
                            <i class="fas fa-info-circle text-info"></i>
                            AWK 核心架构
                        </h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="text-center p-4 bg-primary/10 rounded-lg">
                                <i class="fas fa-play text-primary text-3xl mb-2"></i>
                                <h3 class="font-bold">BEGIN</h3>
                                <p class="text-sm">预处理器，初始化变量</p>
                            </div>
                            <div class="text-center p-4 bg-secondary/10 rounded-lg">
                                <i class="fas fa-sync text-secondary text-3xl mb-2"></i>
                                <h3 class="font-bold">主循环</h3>
                                <p class="text-sm">逐行处理，模式匹配</p>
                            </div>
                            <div class="text-center p-4 bg-accent/10 rounded-lg">
                                <i class="fas fa-stop text-accent text-3xl mb-2"></i>
                                <h3 class="font-bold">END</h3>
                                <p class="text-sm">后处理，汇总统计</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 基础语法页面 -->
            <div v-if="currentTab === 'basics'" class="space-y-8">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-3xl mb-6">
                            <i class="fas fa-book text-primary"></i>
                            AWK 基础语法
                        </h2>
                        
                        <div class="space-y-6">
                            <div>
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-cog"></i>
                                    核心参数
                                </h3>
                                <div class="overflow-x-auto">
                                    <table class="table table-zebra">
                                        <thead>
                                            <tr>
                                                <th>参数</th>
                                                <th>功能</th>
                                                <th>示例</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td><code>-F</code></td>
                                                <td>指定字段分隔符</td>
                                                <td><code>awk -F',' '{print $2}' data.csv</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>-v</code></td>
                                                <td>定义变量</td>
                                                <td><code>awk -v threshold=80 '$3>threshold'</code></td>
                                            </tr>
                                            <tr>
                                                <td><code>-f</code></td>
                                                <td>执行脚本文件</td>
                                                <td><code>awk -f script.awk data.txt</code></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-variable"></i>
                                    内置变量
                                </h3>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="code-block">
                                        <strong>NR</strong> - 当前记录号<br>
                                        <code>awk 'NR>1 {print}' file</code><br>
                                        <small>跳过第一行</small>
                                    </div>
                                    <div class="code-block">
                                        <strong>NF</strong> - 字段数量<br>
                                        <code>awk 'NF==5' data.txt</code><br>
                                        <small>筛选5列记录</small>
                                    </div>
                                    <div class="code-block">
                                        <strong>FS</strong> - 输入分隔符<br>
                                        <code>BEGIN{FS=":"}</code><br>
                                        <small>等效于 -F:</small>
                                    </div>
                                    <div class="code-block">
                                        <strong>OFS</strong> - 输出分隔符<br>
                                        <code>BEGIN{OFS="|"}</code><br>
                                        <small>输出用|分隔</small>
                                    </div>
                                </div>
                            </div>

                            <div>
                                <h3 class="text-xl font-bold mb-3">
                                    <i class="fas fa-code-branch"></i>
                                    流程控制
                                </h3>
                                <div class="tabs tabs-boxed">
                                    <a class="tab" :class="{'tab-active': syntaxTab === 'condition'}" @click="syntaxTab = 'condition'">条件判断</a>
                                    <a class="tab" :class="{'tab-active': syntaxTab === 'loop'}" @click="syntaxTab = 'loop'">循环结构</a>
                                    <a class="tab" :class="{'tab-active': syntaxTab === 'array'}" @click="syntaxTab = 'array'">数组操作</a>
                                </div>
                                
                                <div v-if="syntaxTab === 'condition'" class="code-block mt-4">
# 分级统计CPU使用率
$3 > 90 {print "Critical:", $1; crit++}
$3 > 70 {print "Warning:", $1; warn++}
END {
    print "Critical:", crit, "cases"
    print "Warning:", warn, "cases"
}
                                </div>
                                
                                <div v-if="syntaxTab === 'loop'" class="code-block mt-4">
# 计算列平均值
{
    sum += $2
    count++
}
END {
    avg = sum/count
    printf "Average: %.2f\n", avg
}
                                </div>
                                
                                <div v-if="syntaxTab === 'array'" class="code-block mt-4">
# 统计IP访问频次
/GET \/api/ {
    ip_count[$1]++
}
END {
    for(ip in ip_count)
        print ip, ip_count[ip] | "sort -nrk2"
}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实战示例页面 -->
            <div v-if="currentTab === 'examples'" class="space-y-8">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-3xl mb-6">
                            <i class="fas fa-tools text-primary"></i>
                            运维实战场景
                        </h2>
                        
                        <div class="space-y-8">
                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="card-title text-xl">
                                        <i class="fas fa-chart-line text-success"></i>
                                        场景1：日志实时分析
                                    </h3>
                                    <p class="mb-4">监控Nginx访问日志，实时统计状态码分布</p>
                                    <div class="code-block">
tail -f nginx.log | awk '
BEGIN {
    print "[Live Monitoring]"
    total=0; 4xx=0; 5xx=0
}
{
    total++
    if($9 ~ /^4/) 4xx++
    if($9 ~ /^5/) 5xx++
    printf "\rTotal:%d 4xx:%d 5xx:%d", total,4xx,5xx
    fflush()
}'
                                    </div>
                                    <div class="alert alert-info mt-4">
                                        <i class="fas fa-info-circle"></i>
                                        <span>使用 fflush() 确保实时输出，正则匹配状态码模式</span>
                                    </div>
                                </div>
                            </div>

                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="card-title text-xl">
                                        <i class="fas fa-server text-warning"></i>
                                        场景2：系统性能报告
                                    </h3>
                                    <p class="mb-4">分析top命令输出，生成CPU使用率报告</p>
                                    <div class="code-block">
top -bn1 | awk '
NR>7 {
    user+=$2; sys+=$4; idle=$8
}
END {
    used = user + sys
    printf "CPU Usage:\n"
    printf "- User: %.1f%%\n", user
    printf "- System: %.1f%%\n", sys  
    printf "- Idle: %.1f%%\n", idle
}'
                                    </div>
                                    <div class="alert alert-success mt-4">
                                        <i class="fas fa-check-circle"></i>
                                        <span>跳过前7行标题，累加计算各项CPU指标</span>
                                    </div>
                                </div>
                            </div>

                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="card-title text-xl">
                                        <i class="fas fa-network-wired text-info"></i>
                                        场景3：网络连接分析
                                    </h3>
                                    <p class="mb-4">分析netstat输出，统计连接状态分布</p>
                                    <div class="code-block">
netstat -an | awk '
/^tcp/ {
    state[$6]++
    total++
}
END {
    print "TCP Connection States:"
    print "====================="
    for(s in state) {
        printf "%-12s: %d (%.1f%%)\n", s, state[s], state[s]*100/total
    }
    print "Total connections:", total
}'
                                    </div>
                                </div>
                            </div>

                            <div class="card bg-base-200">
                                <div class="card-body">
                                    <h3 class="card-title text-xl">
                                        <i class="fas fa-hdd text-error"></i>
                                        场景4：磁盘使用分析
                                    </h3>
                                    <p class="mb-4">解析df命令输出，找出使用率超过阈值的分区</p>
                                    <div class="code-block">
df -h | awk '
BEGIN {threshold = 80}
NR>1 && $5+0 > threshold {
    gsub(/%/, "", $5)
    printf "WARNING: %s is %s%% full (mounted on %s)\n", $1, $5, $6
    count++
}
END {
    if(count == 0) print "All filesystems are below threshold"
    else printf "Found %d filesystems above %d%% usage\n", count, threshold
}'
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 在线练习页面 -->
            <div v-if="currentTab === 'playground'" class="space-y-8">
                <div class="card bg-base-100 shadow-xl">
                    <div class="card-body">
                        <h2 class="card-title text-3xl mb-6">
                            <i class="fas fa-play-circle text-primary"></i>
                            AWK 在线练习
                        </h2>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div>
                                <h3 class="text-xl font-bold mb-3">示例数据</h3>
                                <div class="tabs tabs-boxed mb-4">
                                    <a class="tab" :class="{'tab-active': dataType === 'log'}" @click="dataType = 'log'">访问日志</a>
                                    <a class="tab" :class="{'tab-active': dataType === 'csv'}" @click="dataType = 'csv'">CSV数据</a>
                                    <a class="tab" :class="{'tab-active': dataType === 'system'}" @click="dataType = 'system'">系统信息</a>
                                </div>
                                <textarea class="textarea textarea-bordered w-full h-40" v-model="sampleData" readonly></textarea>
                            </div>
                            
                            <div>
                                <h3 class="text-xl font-bold mb-3">AWK 命令</h3>
                                <textarea class="textarea textarea-bordered w-full h-20 mb-4" v-model="awkCommand" placeholder="输入AWK命令..."></textarea>
                                <button class="btn btn-primary w-full mb-4" @click="runAwkCommand">
                                    <i class="fas fa-play mr-2"></i>
                                    执行命令
                                </button>
                                <div class="terminal h-40 overflow-y-auto">
                                    <div v-if="!awkResult">等待执行AWK命令...</div>
                                    <pre v-else>{{ awkResult }}</pre>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8">
                            <h3 class="text-xl font-bold mb-4">常用命令示例</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <button class="btn btn-outline" @click="loadExample('print_fields')">
                                    打印特定字段
                                </button>
                                <button class="btn btn-outline" @click="loadExample('count_lines')">
                                    统计行数
                                </button>
                                <button class="btn btn-outline" @click="loadExample('filter_data')">
                                    条件过滤
                                </button>
                                <button class="btn btn-outline" @click="loadExample('sum_column')">
                                    列求和
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <footer class="footer footer-center p-10 bg-base-200 text-base-content rounded">
            <div class="grid grid-flow-col gap-4">
                <a class="link link-hover">关于AWK</a>
                <a class="link link-hover">学习资源</a>
                <a class="link link-hover">实战案例</a>
                <a class="link link-hover">进阶技巧</a>
            </div>
            <div>
                <p>来源：<a href="https://blog.csdn.net/2401_86478612/article/details/146258537" target="_blank" class="link link-primary">AWK! 运维三剑客之首！</a></p>
                <p>Copyright © 2024 - AWK 学习平台</p>
            </div>
        </footer>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    currentTab: 'overview',
                    syntaxTab: 'condition',
                    dataType: 'log',
                    awkCommand: '',
                    awkResult: '',
                    sampleData: ''
                }
            },
            computed: {
                sampleData() {
                    const data = {
                        log: `192.168.1.100 - - [27/Dec/2024:10:15:23 +0800] "GET /api/users HTTP/1.1" 200 1234
192.168.1.101 - - [27/Dec/2024:10:15:24 +0800] "POST /api/login HTTP/1.1" 401 567
192.168.1.102 - - [27/Dec/2024:10:15:25 +0800] "GET /index.html HTTP/1.1" 200 2345
192.168.1.100 - - [27/Dec/2024:10:15:26 +0800] "GET /api/data HTTP/1.1" 500 123`,
                        csv: `name,age,salary,department
张三,28,8000,技术部
李四,32,12000,产品部
王五,25,6000,技术部
赵六,35,15000,管理层`,
                        system: `PID    USER     %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
1234   root     15.2  2.1  12345  5678 ?        S    10:00   0:05 nginx
5678   www      8.7   1.5   9876  3456 ?        S    10:01   0:02 php-fpm
9012   mysql    25.3  8.9  45678 12345 ?        S    09:30   1:23 mysqld`
                    };
                    return data[this.dataType];
                }
            },
            methods: {
                changeTheme(theme) {
                    document.documentElement.setAttribute('data-theme', theme);
                },
                runAwkCommand() {
                    if (!this.awkCommand.trim()) {
                        this.awkResult = '请输入AWK命令';
                        return;
                    }
                    
                    // 模拟AWK命令执行
                    try {
                        this.awkResult = this.simulateAwk(this.awkCommand, this.sampleData);
                    } catch (error) {
                        this.awkResult = '命令执行错误: ' + error.message;
                    }
                },
                simulateAwk(command, data) {
                    const lines = data.split('\n');
                    let result = [];
                    
                    // 简单的AWK命令模拟
                    if (command.includes('{print $1}')) {
                        lines.forEach(line => {
                            const fields = line.split(/\s+/);
                            if (fields[0]) result.push(fields[0]);
                        });
                    } else if (command.includes('{print NR, $0}')) {
                        lines.forEach((line, index) => {
                            result.push(`${index + 1} ${line}`);
                        });
                    } else if (command.includes('END {print NR}')) {
                        result.push(`总行数: ${lines.length}`);
                    } else if (command.includes('$3 > 10')) {
                        lines.forEach(line => {
                            const fields = line.split(/\s+/);
                            if (parseFloat(fields[2]) > 10) {
                                result.push(line);
                            }
                        });
                    } else {
                        result.push('模拟执行: ' + command);
                        result.push('输出数据的前几行:');
                        result = result.concat(lines.slice(0, 3));
                    }
                    
                    return result.join('\n');
                },
                loadExample(type) {
                    const examples = {
                        print_fields: '{print $1, $3}',
                        count_lines: 'END {print NR}',
                        filter_data: '$3 > 10 {print}',
                        sum_column: '{sum += $3} END {print "Total:", sum}'
                    };
                    this.awkCommand = examples[type];
                }
            },
            mounted() {
                // 默认加载一个示例命令
                this.awkCommand = '{print $1, $9}';
            }
        }).mount('#app');
    </script>
</body>
</html>